<template>
    <div class="carheader">
        <van-row>
            <van-col span="8">

                <img src="../assets/logo.png" alt="" width="35" height="35" class="imgs">
                <div class="title">
                    <div style="color:#FFFFFF; font-weight: 800;">AI智选车APP</div>
                    <span style="color:#999999">选车买车二手车</span>
                </div>


            </van-col>
            <van-col span="12">
                <!--搜索按钮-->
                <van-icon name="search" size="28px" style="line-height: 45px;
            float: right;color: #f1f2f3; margin-right:4px; cursor: pointer;" @click="onSearch" />
            </van-col>
            <van-col span="4">
                <div class="righth" @click="onDown">
                    <div style="color:#f1f2f3;font-size:13px;font-weight: 800; padding-left:5px;padding-top:3px;">打开App
                    </div>
                    <div style="color:black;font-size:10px;font-weight: 800; padding-left:5px">上亿人在用</div>

                </div>


            </van-col>
        </van-row>
    </div>
    <!--导航栏-->
    <van-tabs v-model:active="active">
        <van-tab v-for="(item, index) in tabData" :title="item.name">
            <!-- 内容 {{ index }} -->
            <component :is="item.component"></component>
        </van-tab>
    </van-tabs>
    <van-icon name="wap-nav" size="35px" @click="showPopup" class="icons" />

    <van-popup v-model:show="showBottom" closeable round position="bottom" :style="{ height: '80%' }">
        <h4 style="text-align: center;">全部频道</h4>
        <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(value,index) in tabData" :key="value">
                 <van-button type="default" @click="onClick(index)">{{ value.name }}</van-button>
            </van-grid-item>
             <!-- <div v-for="value in 6">
               
             </div> -->
        </van-grid>
    </van-popup>




</template>

<script setup>
//导入useRouter钩子函数
import { ref } from 'vue'
import { useRouter } from 'vue-router'
//调用useRouter钩子函数获取路由对象
const router = useRouter()
//定义当前激活tab标签页的索引值
const active = ref(0)

//引入对应的组件
import Selected from '../components/Selected.vue'
import Locals from '../components/Locals.vue'
import NewCar from '../components/NewCar.vue'
import CookVideo from '../components/CookVideo.vue'
import Yccode from '../components/Yccode.vue'
import DcarShop from '../components/DcarShop.vue'

//弹出层数据定义
const showBottom = ref(false)



const onDown = () => {
    // window.location.href="/downApp"  原有的window js中跳转方式 可以针对外部链接进行跳转
    //直接采用path进行路由跳转
    // router.push('/downApp')
    //根据名字跳转
    router.push({ name: 'downApp' })
}

//点击跳转
const onSearch = () => {
    router.push({ path: "/searchs" })
}

//定义tab导航栏
const tabData = ref([
    { id: 1, name: '精选', component: Selected },
    { id: 2, name: '本地', component: Locals },
    { id: 3, name: '新车', component: NewCar },
    { id: 4, name: '原创', component: Yccode },
    { id: 5, name: '视频看车', component: CookVideo },
    { id: 6, name: '导购', component: DcarShop },
    { id: 7, name: '行业', component: NewCar },
    { id: 8, name: '新能源', component: NewCar },
])


//弹出层数据函数
const showPopup = () => {
    //这是打开
    showBottom.value = true

}

const onClick = (index) => {
    console.log(index);
     active.value = index
    //这是关闭
    showBottom.value = false
    
}
</script>

<style scoped>
.carheader {
    width: 100%;
    height: 45px;
    background: url(../assets/heaber-bg.png) no-repeat;
    background-size: 100% 100%;

}

.imgs {
    padding: 5px 12px
}

.title {

    position: fixed;
    top: 0px;
    left: 51px;
    text-align: inherit;
    font-size: 13px;
    margin-top: 5px;
}

.righth {
    width: 65px;
    height: 40px;
    background-color: #fe9000;
    margin-top: 2px;
    border-radius: 8px;
    cursor: pointer;
}
.van-button{
    width: 100%;
    height: 40px;
 
}
  :deep(.van-button--default){
    background-color: #bbbaba;
    color: black;
   }
   .icons{
    background-color: white;
    position: absolute;
    top:48px;
    right: 0;
    z-index: 100;
    cursor: pointer;
   }
</style>